<template>
	<view class="container">
		<view class="login-header">
			<image class="logo" src="/static/logo.jpg" mode="aspectFit"></image>
			<text class="title">技师端登录</text>
		</view>
		<view class="login-form">
			<button class="login-btn" @tap="handleLogin">登录</button>
		</view>
		<!-- 自定义弹窗 -->
		<view class="modal-overlay" v-if="showModal" @tap="closeModal"></view>
		<view class="modal" v-if="showModal">
			<view class="modal-content">
				<view class="modal-title">提示</view>
				<view class="modal-body">您还不是技师，请先申请技师账号</view>
				<view class="modal-footer">
					<button class="modal-btn apply-btn" @tap="goToApply">去申请</button>
					<button class="modal-btn login-btn" @tap="reLogin">重新登录</button>
					<button class="modal-btn back-btn" @tap="goBack">返回顾客端</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '',
				password: '',
				showModal: false
			}
		},
		onLoad() {
			// 保存登录类型为技师端
			uni.setStorageSync('loginType', 'technician')
			// 检查是否已登录
			const userInfoStr = uni.getStorageSync('userInfo')
			const token = uni.getStorageSync('token')
			const loginType = uni.getStorageSync('loginType')
			if (userInfoStr) {
				try {
					// 解析用户信息
					let userInfo = null
					if (userInfoStr) {
						try {
							// 如果是字符串，尝试解析
							if (typeof userInfoStr === 'string') {
								const parsed = JSON.parse(userInfoStr)
								// 检查是否是登录响应格式
								if (parsed.code === 200 && parsed.data) {
									userInfo = parsed.data
								} else {
									userInfo = parsed
								}
							} else {
								// 如果不是字符串，直接使用
								userInfo = userInfoStr
							}
						} catch (e) {
							// 解析失败时，尝试直接使用
							userInfo = userInfoStr
						}
					}
					// 检查用户角色和登录类型是否匹配
					if (loginType === 'technician' && userInfo && userInfo.role !== 'technician') {
						this.showModal = true
						return
					}
					if (userInfo.role === 'technician') {
						// 如果已登录且是技师，直接跳转到技师端首页
						uni.reLaunch({
							url: '/pages/technician/home'
						})
					}
				} catch (err) {
					console.error('解析用户信息失败:', err)
				}
			}
		},
		methods: {
			handleLogin() {
				// 保存登录类型为技师端
				uni.setStorageSync('loginType', 'technician')
				// 跳转到登录页面
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			goToCustomerLogin() {
				uni.navigateTo({
					url: '/pages/login/customer-login'
				})
			},
			// 关闭弹窗
			closeModal() {
				this.showModal = false
			},
			// 去申请技师
			goToApply() {
				this.showModal = false
				uni.setStorageSync('loginType', 'customer')
				uni.navigateTo({
					url: '/pages/technician-apply/technician-apply'
				})
			},
			// 重新登录
			reLogin() {
				this.showModal = false
				// 清除登录信息
				uni.removeStorageSync('token')
				uni.removeStorageSync('userInfo')
				uni.removeStorageSync('memberId')
				// 跳转到登录页面
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			// 返回顾客端
			goBack() {
				this.showModal = false
				uni.setStorageSync('loginType', 'customer')
				uni.reLaunch({
					url: '/pages/index/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #FFFFFF;
		padding: 60rpx;
	}

	.login-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 80rpx;

		.logo {
			width: 200rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
		}

		.title {
			font-size: 40rpx;
			font-weight: 600;
			color: #333;
			letter-spacing: 2rpx;
			margin-top: 20rpx;
			position: relative;
			padding-bottom: 10rpx;

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 50%;
				transform: translateX(-50%);
				width: 60rpx;
				height: 4rpx;
				background: #007AFF;
				border-radius: 2rpx;
			}
		}
	}

	.login-form {
		.form-item {
			margin-bottom: 40rpx;

			.input {
				width: 100%;
				height: 88rpx;
				background: #F8F8F8;
				border-radius: 44rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
				color: #333;
			}
		}

		.login-btn {
			width: 100%;
			height: 88rpx;
			background: #007AFF;
			border-radius: 44rpx;
			color: #FFFFFF;
			font-size: 32rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 60rpx;
		}

		.other-options {
			margin-top: 40rpx;
			text-align: center;

			.option-text {
				font-size: 28rpx;
				color: #007AFF;
			}
		}
	}

	// 弹窗样式
	.modal-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		z-index: 1000;
		padding: 40rpx;
		box-sizing: border-box;

		.modal-content {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.modal-title {
			font-size: 36rpx;
			font-weight: 600;
			color: #333;
			margin-bottom: 30rpx;
		}

		.modal-body {
			font-size: 32rpx;
			color: #666;
			text-align: center;
			margin-bottom: 40rpx;
			line-height: 1.5;
		}

		.modal-footer {
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.modal-btn {
				width: 100%;
				height: 88rpx;
				border-radius: 44rpx;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				&.apply-btn {
					background-color: #007AFF;
					color: #fff;
				}

				&.login-btn {
					background-color: #f8f8f8;
					color: #333;
				}

				&.back-btn {
					background-color: #f8f8f8;
					color: #666;
				}
			}
		}
	}
</style>